<template>
  <el-header style="font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px;display:flex;    text-align: right;
      width: 100%; justify-content: flex-end;">
    <el-dropdown style="width: 100px;cursor:pointer">
      <span>{{userInfo.userName}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </el-header>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      userInfo:JSON.parse(localStorage.getItem('userInfo')) ,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  mounted: function () {
    console.log('头部--获取用户信息（通过缓存数据）')
    console.log(this.userInfo)
  },
  methods: {
    updataUserInfo(){
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    }
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}
</style>